<!-- 头部 -->
<template>
  <div class="bottom-left u-p-t-10">
    <div class="bottom-left-box u-rela">
      <div style="position: absolute; left: 10px; width: 100%">
        <h2 class="policeTitle"><span>当日各年级报警数量分布</span></h2>
      </div>

      <div class="region-echarts" v-if="pageflag" style="height: 100%">
        <Echart
          :options="regionOptions"
          id="regionChart"
          class="region-echarts_center"
        ></Echart>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "@/components/echart/index.vue";
export default {
  name: "leftTopBox",
  components: {
    Echart,
  },
  props:{
     schooleId:{
       type:[String, Number],
       default:0
     }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
      dataList:{} // 存储数据
    };
  },

  mounted() {
    this.getDataHandler();
  },
  methods: {
    async getDataHandler(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/police_center/getTodayResortTotal', { params })
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
          this.getData(data.data.detail_list,data.data.total_list)
        }
      } catch {
        console.log('error')
      }
    },
    getData(data, data2) {
      
      let dataList={}
      const titleData=data.map(iv=>{return iv.title})
      const lineData=data2.map(iv=>{ return iv.resort_count })
      let objArr=[]
      data.forEach((iv,is)=>{
        // let obj = {}
        iv.resort_list.forEach((iv2) => {
          // obj[iv2.resort_name]=iv2.resort_count
          if(is===0){
            objArr.push(iv2.resort_name)
          }
          objArr.forEach(item=>{
            dataList[item]=dataList[item]?dataList[item]:[]
            if(item==iv2.resort_name){
              dataList[item].push(iv2.resort_count)
            }
          })
        });
        // iv.barObj=obj
      })
      this.dataList=dataList
      console.log(this.dataList,'=====这是数据')


      this.pageflag = true;
      if (lineData) {
        this.init(lineData,titleData);
        
      }
    },
    init(lineData,titleData) {
      // 区域分布
      this.regionOptions = {
        color: ["#5c00ff"],
        legend: {
          textStyle: {
            color: "#ffffff",
          },
          itemWidth: 15,
          itemHeight: 15,
          right: 0,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          }
        },
        grid:{
          left:40,
          right:20,
          bottom:20,
          top:100,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#ccc",
          },
          data: titleData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ccc",
          },
        },
        series: [
         ...this.setDataList(),{
            name: "报警总数",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#178BF6",
                borderColor: "#ccc",
                barBorderRadius: 6,
                // label: {
                //   show: true,
                //   position: "top",
                //   color: "#ccc",
                //   formatter: function (p) {
                //     return p.value > 0 ? p.value  : "";
                //   },
                // },
              },
            },
            data: lineData,
          },
        ],
      };
    },
    getBarData(data) {
      return {
        name: data.name || "",
        type: "bar",
        data: data.data,
        barWidth: 10, //柱子宽度
        barGap: 0.2, //柱子之间间距
        itemStyle: {
          color: data.color
        },
      };
    },
    // 数据处理
    setDataList(){
      let org=['#FDB01A','#01DCFF','#1890FF','#7018FF']
      let objArr = []
      Object.keys(this.dataList).forEach((iv,is)=>{
          const data = this.getBarData({
            name:iv,
            data:this.dataList[iv],
            color: org[is]
          })
          objArr.push(data)
      })
      console.log(objArr,'======objArr')
      return objArr
      // for(key in this.dataList){
      //   this.getBarData({
      //         name:key,
      //         data:this.dataList[key],
      //         color: "orange"
      //   })
      // }
    }
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.bottom-left {
  width: 100%;
  height: 100%;

  &-box {
    height: 100%;
  }
}
</style>
